<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="我的订单" placeholder bgColor="#fff"></u-navbar>
    <view class="tabs">
      <u-tabs
        :list="tabsList"
        lineColor="#53BE07"
        lineWidth="40rpx"
        inactiveStyle="color: #313131;"
        activeStyle="color: #53BE07;"
        :current="tabsCurrent"
        @change="tabsChange"
      >
      </u-tabs>
    </view>
    <view class="order-list" v-if="list.length">
      <view class="order-item" v-for="item in list" :key="item.id" @click="jumpTo('/pages/myOrder/detail?id='+item.id)">
        <view class="u-flex u-row-between u-m-b-16">
          <view class="u-font-24">单号：{{ item.orderCode }}</view>
          <view class="u-font-28" :style="{ color: `${statusInfo[item.status].color}` }">{{ statusInfo[item.status].text }}</view>
        </view>
        <view class="goods-list">
          <view class="goods-item" v-for="(goods, index) in item.productsList" :key="index">
            <image class="goods-img" :src="goods.subtitle?goods.subtitle.split(',')[0]:''" mode="aspectFill" />
            <view class="u-flex-1 u-flex u-flex-column u-col-top u-row-between">
              <view class="u-line-2 u-font-24" style="color: #000;height: 88rpx;">{{ goods.title }}</view>
              <view class="u-flex u-row-between" style="width: 100%;">
                <view class="u-font-24" style="color: #818181;">{{ goods.skuName }}</view>
                <view class="u-font-28">x {{ goods.quantity }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="u-flex u-row-between u-m-t-20">
          <view class="u-font-24">{{ item.createdTime }}</view>
          <view class="u-font-32"><text class="u-font-24">订单金额：</text>¥ {{ (item.payAmount / 100).toFixed(2) }}</view>
        </view>
        <view class="order-btn">
          <view class="def-btn" v-if="item.status=='0'" @click.stop="close(item)">取消订单</view>
          <view class="def-btn" v-if="item.status=='1'">申请退款</view>
          <view class="def-btn" v-if="item.status=='2'||item.status=='3'">查看物流</view>
          <view class="par-btn" v-if="item.status=='0'">继续支付</view>
          <view class="par-btn" v-if="item.status=='2'" @click.stop="confirm(item)">确认收货</view>
        </view>
      </view>
    </view>
    <view class="empty" v-else>
      <image class="empty-img" src="../../static/empty.png" />
      <view>您还没有下过单</view>
      <view class="to-shop" @click="jumpTab('/pages/shop/shop')">
        <image src="../../static/order/toShop.png" />
        <text>去逛逛</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrderList, closeOrder, confirmOrder } from '@/api/index'

export default {
  data() {
    return {
      tabsList: [
        {
          name: '全部',
          status: '',
        },
        {
          name: '待付款',
          status: '0',
        },
        {
          name: '待发货',
          status: '1',
        },
        {
          name: '待收货',
          status: '2',
        },
        {
          name: '退款',
          status: '5',
        },
        {
          name: '已完成',
          status: '3',
        },
      ],
      statusInfo: {
        '0': {
          color: '#56CB03',
          text: '待付款'
        },
        '1': {
          color: '#FF6600',
          text: '待发货'
        },
        '2': {
          color: '#42B0FB',
          text: '待收货'
        },
        '3': {
          color: '#56CB03',
          text: '已完成'
        },
        '4': {
          color: '#000',
          text: '已取消 '
        },
        '5': {
          color: '#000',
          text: '已退款'
        }
      },
      tabsCurrent: 0,
      list: [],
      pageNum: 1,
      pages: 0,
    };
  },
  onLoad(options) {
    if(options.tabsCurrent) {
      this.tabsCurrent = +options.tabsCurrent
    }
    this.getPage()
  },
  methods: {
    close(item) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '确定取消该笔订单?',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if(confirm) {
            closeOrder({ id: item.id }).then(res => {
              uni.showToast({
                icon: 'none',
                title: '订单取消成功'
              })
              that.pageNum = 1
              that.list = []
              that.getPage()
            })
          }
        }
      })
    },
    confirm(item) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '确定收到货物?',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if(confirm) {
            confirmOrder({ id: item.id }).then(res => {
              uni.showToast({
                icon: 'none',
                title: '收到成功'
              })
              that.pageNum = 1
              that.list = []
              that.getPage()
            })
          }
        }
      })
    },
    getPage() {
      uni.showLoading({ mask: true })
      getOrderList({pageNum: this.pageNum, pageSize: 100, status: this.tabsList[this.tabsCurrent].status, userId: uni.getStorageSync('userInfo').userId}).then(res => {
        uni.hideLoading()
        this.list = [...this.list, ...res.rows]
        this.pages = Math.ceil(res.total / 100)
      })
    },
    tabsChange(e) {
      this.tabsCurrent = e.index
      this.pageNum = 1
      this.list = []
      this.getPage()
    },
  },
  onReachBottom() {
    if(this.pageNum < this.pages) {
      this.pageNum++
      this.getPage()
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .tabs {
    margin: 12rpx 0;
    width: 100%;
    padding: 10rpx 20rpx 16rpx;
    background: #FFFFFF;
  }
  .order-list {
    width: 702rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    .order-item {
      width: 100%;
      background: #FFFFFF;
      border-radius: 12rpx;
      padding: 24rpx 22rpx;
      .goods-list {
        display: flex;
        flex-direction: column;
        gap: 40rpx;
        margin-bottom: 30rpx;
        .goods-item {
          display: flex;
          gap: 20rpx;
          .goods-img {
            width: 140rpx;
            height: 140rpx;
            border-radius: 4rpx;
          }
        }
      }
      .order-btn {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 10rpx;
        margin-top: 18rpx;
        .def-btn {
          width: 160rpx;
          height: 60rpx;
          line-height: 56rpx;
          text-align: center;
          background: #FFFFFF;
          border-radius: 200rpx;
          border: 2rpx solid #000000;
          font-size: 24rpx;
          color: #000000;
        }
        .par-btn {
          width: 160rpx;
          height: 60rpx;
          line-height: 56rpx;
          text-align: center;
          background: #FFFFFF;
          border-radius: 200rpx;
          border: 2rpx solid #56CB03;
          font-size: 24rpx;
          color: #56CB03;
        }
      }
    }
  }
}
.empty {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 28rpx;
  color: #333333;
  padding: 200rpx 0 500rpx;
  .empty-img {
    width: 266rpx;
    height: 266rpx;
    margin-bottom: 22rpx;
  }
  .to-shop {
    width: 440rpx;
    height: 90rpx;
    background: #56CB03;
    border-radius: 200rpx;
    border: 2rpx solid #56CB03;
    font-size: 28rpx;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rpx;
    margin: 0 auto;
    margin-top: 120rpx;
    image {
      display: block;
      width: 28rpx;
      height: 27.28rpx;
    }
  }
}
</style>
